import React from "react";
import Swiper,{Autoplay} from 'swiper'
import Image from "next/image";
import img1 from "../../public/carousel01.png";

class IndexLunTow extends React.Component<any, any> {
    componentDidMount() {
        new Swiper('.apple-banner .swiper-container', {
            modules:[Autoplay],
            autoplay: {
                delay: 3000,

                disableOnInteraction:false,
                pauseOnMouseEnter:true
            },

            loop: true,
            loopedSlides:4,
            runCallbacksOnInit: false,
            watchSlidesProgress : true,
            on: {
                progress: function (swiper) {
                    let txtPositionX;
                    let scale;
                    let txtPositionY;
                    for (var i = 0; i < swiper.slides.length; i++) {
                        var slide = swiper.slides.eq(i);
                        // @ts-ignore
                        var progress = slide[0].progress;//获取slide的progress
                        var translate;//slide的位移

                        //左边出去时，slide位移减慢，slide缩放，文字Y视差。else右边进时，文字X视差
                        if (progress > 0) {
                            translate = progress * 0.9 * swiper.width;
                            scale = 1 - progress * 0.1
                            if (progress > 1) {
                                scale = 0.9
                            }
                            txtPositionX = 0
                            txtPositionY = progress * 30 + 'px'
                        } else {
                            translate = 0;
                            scale = 1
                            txtPositionX = -progress * 1000 + 'px'
                            txtPositionY = 0
                        }
                        //赋加动画到slide和txt
                        var txts = slide.find('.txt');
                        for (var j = 0; j < txts.length; j++) {
                            txts.eq(j).transform('translate3d(' + txtPositionX + ',' + txtPositionY + ',0)');
                        }
                        slide.transform('translate3d(' + (translate) + 'px,0,0) scale(' + scale + ')');
                    }
                },
                setTransition: function (swiper, speed) {
                    let slide;
                    for (var i = 0; i < swiper.slides.length; i++) {
                        //赋加动画时间到slide和txt
                        slide = swiper.slides.eq(i)
                        slide.transition(speed)
                        var txts = slide.find('.txt');
                        for (var j = 0; j < txts.length; j++) {
                            txts.eq(j).transition(speed)
                        }
                    }
                },
                slideChangeTransitionStart: function (swiper) {
                    if (swiper.autoplay) {
                        swiper.slides.eq(swiper.realIndex - 1).addClass('replace');
                        swiper.slides.eq(swiper.realIndex - 1).removeClass('current firsrCurrent');
                        swiper.slides.eq(swiper.realIndex).addClass('current');
                        if (swiper.realIndex == 0) {
                            swiper.slides.removeClass('replace');
                        }
                    }
                },

            }
        })
    }

    render() {
        return (
            <div className="apple-banner">
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide slide2">

                        </div>
                        <div className="swiper-slide slide2">

                        </div>
                        <div className="swiper-slide slide2">

                        </div>
                    </div>

                </div>
            </div>

        )
    }
}


export default IndexLunTow
